<template>
	<view>
		<Navbar :backUrl="backUrl"></Navbar>
		<view class="u-m-l-30 u-m-r-30">
			<view v-for="(item,index) in addressList" :key="item.id" @click="onGoAddressDetail(item.id,item.status)">
				<view class="u-card-box u-p-l-15 u-p-r-15 u-m-t-20">
					<view class="u-p-l-10 u-width-100">
						<view class="u-font-bold u-flex u-row-between">
							<view class="u-flex u-ellipsis">
								<view class="u-m-r-10" :class="item.statusClass">{{ item.statusName }}</view>
								<view class="u-font-34">{{item.address_name}}</view>
							</view>
							<view @click.native.stop="openHandle(item)">
								<u-icon name="more-dot-fill" size="48"></u-icon>
							</view>

						</view>
						<view class="u-m-t-10 u-font-28">{{item.address}}{{item.doorplate}}</view>
						<view class="u-font-28 u-flex u-row-between">
							<view>
								<span class="u-color-gray">负责人：</span>
								<span>{{item.supply_info.name}}</span>
								<span class="u-m-l-10">{{item.supply_info.phone}}</span>
							</view>
							<view class="renew_btn" @click.native.stop="onReNewAddress(item)" v-if="[1].includes(item.status)">续签 ></view>
						</view>
					</view>
					<view class="u-m-t-20 u-p-l-15 u-p-r-15 u-p-t-10 u-p-b-10 u-flex" :class="item.typeClass"
						v-if="!(item.is_temp == 0 && item.status == 0)">
						<view class="typeTitle">{{item.tempName}}</view>
						<view class="u-m-l-10 u-font-26">{{item.tempTime}}</view>
					</view>
				</view>
			</view>
		</view>

		<Loadmore :status="loadStatus"></Loadmore>

		<view style="height: 200rpx;"></view>

		<Bottom :btnText="'新增地址'" @confirm="goAdd"></Bottom>

		<!-- 操作弹出框 -->
		<CommonPopup :popupShow="commonPopup.show" :list="commonPopup.list" @onChooseLabel="onChooseLabel"
			@popupClose="commonPopup.show = false"></CommonPopup>

		<!-- 提示框 -->
		<Modal :show="modal.show" :confirmText="modal.confirmText" :modalContent="modal.content"
			:showCancel="modal.showCancel" @cancel="modal.show = false" @confirm="modalConfirm"></Modal>
	</view>
</template>

<script>
	import Navbar from '@/components/Navbar.vue'
	import reachBottom from '@/mixins/reachBottom.js'
	import Loadmore from '@/components/Loadmore.vue'
	import CommonPopup from '@/components/CommonPopup.vue'
	import Bottom from '@/components/Bottom.vue'
	import Modal from '@/components/Modal.vue'
	import {
		teaAddressList,
		teaAddressDelete,
		teaAdressRenew
	} from '@/network/tea.js'
	export default {
		mixins: [reachBottom],
		components: {
			Navbar,
			Loadmore,
			Modal,
			CommonPopup,
			Bottom
		},
		data() {
			return {
				tabList: [{
					name: '临时场地'
				}, {
					name: '签约场地'
				}],
				tabId: 2,
				current: 0,
				addressList: [],
				backUrl: '/teaBureau/teaPresidentCenter/teaPresidentCenter',
				modal: {
					show: false,
					showCancel: true,
					confirmText: '确定',
					content: '',
					currentId: 0, // 需要删除的地址id
					isDelete: false, // 是否删除
					isRenew: false, // 是否临时续签
					isPayRenew: false // 是否付费续签
				},
				commonPopup: {
					show: false,
					list: [{
						id: 0,
						name: '编辑',
						check: false
					}, {
						id: 1,
						name: '删除',
						check: false
					}],
				},
				loadStatus: 'loadmore',
			}
		},
		onLoad(options) {
			if (options.backUrl) this.backUrl = options.backUrl
		},
		onShow() {
			this.page = 1
			this.addressList.length = 0
			this.loadStatus = 'loadmore'
			this.getAddressList()
		},
		methods: {
			getAddressList() {
				uni.showLoading({
					title: "加载中"
				})
				const params = {
					user_id: uni.getStorageSync("user_id"),
					page: this.page,
					limit: this.pageSize,
					// is_temp: this.tabId
				}
				teaAddressList(params).then(res => {
					if (res.data.list.length > 0) {
						res.data.list.map(item => {
							item.statusName = this.getStatusName(item.effective, item.status).name
							item.statusClass = this.getStatusName(item.effective, item.status).className
							item.typeClass = this.getStatusName(item.effective, item.status).typeName
							if (item.is_temp == 1) {
								item.tempTime = `${item.end_time.slice(0,10)}`
								item.tempName = '临时'
								item.typeClass = 'fail_type'
							} else {
								item.tempName = '签约'
								item.tempTime =
									`${item.start_time.slice(0,10)} —— ${item.end_time.slice(0,10)}`
								item.typeClass = 'success_type'
							}
							this.addressList.push(item)
						})
					}
					if (res.data.list.length < 10) this.loadStatus = 'nomore'
					uni.hideLoading()
					/* this.$nextTick(() => {
						this.$refs.slide.assignment(this.addressList)
					}) */
				})
			},
			getStatusName(valid, status) {
				let data = {
					name: '',
					className: ''
				}
				if (valid == 0) {
					data.name = '失效'
					data.className = 'fail_tag'
				} else {
					if (status == 0) {
						data.name = '审核中'
						data.className = 'cancel_tag'
					} else if (status == 1) {
						data.name = '有效'
						data.className = 'success_tag'
					} else {
						data.name = '已拒绝'
						data.className = 'cancel_tag'
					}
				}
				return data
			},
			goAdd() {
				let isBack = (this.backUrl == 'home' ? true : false)
				uni.navigateTo({
					url: "/pages/addressForm/addressForm?isBack=" + isBack
				})
			},
			toAddressDetail(id) {
				uni.navigateTo({
					url: "/pages/addressForm/addressForm?id=" + id
				})
			},
			itemClick(data) {
				uni.navigateTo({
					url: "/pages/addressForm/addressForm?id=" + data.id
				})
			},
			addressEdit(data) {
				uni.navigateTo({
					url: "/pages/addressForm/addressForm?id=" + data.id
				})
			},
			openHandle(data) {
				this.modal.currentId = data.id
				this.commonPopup.show = true
			},
			onChooseLabel(data) {
				switch (data.id) {
					case 0:
						uni.navigateTo({
							url: "/pages/addressForm/addressForm?id=" + this.modal.currentId
						})
						break;
					case 1:
						this.modal.content = '请确认是否删除该地址'
						this.modal.confirmText = '确定'
						this.modal.show = true
						this.modal.isDelete = true
						break;
				}
				this.commonPopup.show = false
			},
			onGoAddressDetail(id,status){
				if(status == 1){
					uni.navigateTo({
						url: "/pages/addressDetail/addressDetail?id=" + id
					})
				}
			},
			onReNewAddress(val){
				if(val.is_temp == 1){
					this.modal.isRenew = true
				}else{
					this.modal.isPayRenew = true
				}
				this.modal.content = '请确认是否要续签'
				this.modal.confirmText = '确定'
				this.modal.show = true
				this.modal.currentId = val.id
			},
			modalConfirm() {
				const params = {
					address_id: this.modal.currentId
				}
				if(this.modal.isDelete){
					teaAddressDelete(params).then(res => {
						uni.showToast({
							title: "删除成功",
							icon: "none"
						})
					})
				}
				if(this.modal.isRenew){
					teaAdressRenew(params).then(res=>{
						uni.showToast({
							title: "续签成功",
							icon: "none"
						})
					})
				}
				if(this.modal.isPayRenew){
					uni.navigateTo({
						url: "/pages/addressPay/addressPay?id=" + this.modal.currentId
					})
				}
				this.page = 1
				this.addressList.length = 0
				this.loadStatus = 'loadmore'
				this.modal.show = false
				this.modal.isDelete = false
				this.modal.isRenew = false
				this.modal.isPayRenew = false
				this.getAddressList()
			},
			tabChange(val) {
				this.current = val
				if (val == 0) {
					this.tabId = 2
				} else {
					this.tabId = 1
				}
				this.page = 1
				this.addressList.length = 0
				this.loadStatus = 'loadmore'
				this.getAddressList()
			},
			loadData() {
				if (this.loadStatus == 'nomore') return
				this.page++
				this.loadStatus = 'loading'
				this.getAddressList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cancel_tag {
		background: #F96257;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 6rpx 20rpx;
	}

	.success_tag {
		background: #FB7B22;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 6rpx 20rpx;
	}

	.fail_tag {
		background: #9A9A9A;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		border-radius: 8rpx;
		padding: 6rpx 20rpx;
	}

	.fail_type {
		background: #EAFAF2;
		border-radius: 10rpx;

		.typeTitle {
			background: #25D48B;
			color: #fff;
			font-size: 20rpx;
			font-weight: bold;
			border-radius: 8rpx;
			padding: 6rpx 20rpx;
		}
	}

	.success_type {
		background: #FCF0E8;
		border-radius: 10rpx;

		.typeTitle {
			background: #FB7B22;
			color: #fff;
			font-size: 20rpx;
			font-weight: bold;
			border-radius: 8rpx;
			padding: 6rpx 20rpx;
		}
	}

	.renew_btn {
		background: #FFF1E9;
		color: #FC934E;
		padding: 12rpx 24rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
	}
</style>